<template>
  <div class="data-report-container">
    <el-form>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="客户姓名">
            <el-input v-model="filterForm.customerName" placeholder="请输入客户姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button color="#19af7d" @click="filteredData">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      :data="tableData"
      show-summary
      border
      style="width: 100%"
      :summary-method="getSummaries"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="customerName" label="客户姓名" width="180" />
      <el-table-column prop="loanAmount" label="贷款金额(元)" />
      <el-table-column prop="unpaidAmount" label="未还金额(元)" />
      <el-table-column prop="paidAmount" label="已还金额(元)" />
      <el-table-column prop="overdueAmount" label="逾期金额(元)" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

// 筛选表单数据
const filterForm = ref({
  customerName: "",
});

// 表格数据
const tableData = ref([
  {
    customerName: "张三",
    loanAmount: 50000,
    unpaidAmount: 35000,
    paidAmount: 15000,
    overdueAmount: 2000,
  },
  {
    customerName: "李四",
    loanAmount: 80000,
    unpaidAmount: 60000,
    paidAmount: 20000,
    overdueAmount: 5000,
  },
  {
    customerName: "王五",
    loanAmount: 30000,
    unpaidAmount: 12000,
    paidAmount: 18000,
    overdueAmount: 0,
  },
  {
    customerName: "赵六",
    loanAmount: 100000,
    unpaidAmount: 75000,
    paidAmount: 25000,
    overdueAmount: 8000,
  },
  {
    customerName: "钱七",
    loanAmount: 60000,
    unpaidAmount: 40000,
    paidAmount: 20000,
    overdueAmount: 3000,
  },
]);

// 自定义统计方法
const getSummaries = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "统计";
    } else if (column.property === "name") {
      sums[index] = `${data.length}`;
    } else if (
      ["loanAmount", "unpaidAmount", "paidAmount", "overdueAmount"].includes(
        column.property
      )
    ) {
      const values = data.map((item) => Number(item[column.property]));
      if (!values.every((value) => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        sums[index] = `${sums[index]}`;
      } else {
        sums[index] = "";
      }
    } else {
      sums[index] = "";
    }
  });
  return sums;
};

// 根据搜索过滤贷款数据
const filteredData = computed(() => {
  return tableData.value.filter((item) => {
    const nameMatch = item.customerName
      .toLowerCase()
      .includes(filterForm.value.customerName.toLowerCase());
    return nameMatch;
  });
});
</script>

<style scoped></style>
